<template>
  <div>
    <div>
      <van-nav-bar style="background: #d12d1a;" class="fh" @click-left="$router.back()" title="修改资料" left-text="返回"
        left-arrow />
    </div>


    <div>
      <label for="scwj">
        <div class="dip">
          <div style="margin: 23px 0 0 0">
            头像
          </div>
          <div>
            <van-image label="头像" class="tp" width="60px" height="60px" :src="userinfofrom.avatar" />
          </div>
        </div>
      </label>
      <input id="scwj" hidden type="file" @change="change" />


    </div>


    <!-- <van-field v-model="userinfofrom.nickname" /> -->
    <van-field label="昵称" v-model="userinfofrom.nickname" />

    <!-- <van-cell @click="xs = true" is-link title="性别" /> -->

    <van-field readonly clickable label="性别" :value="userinfofrom.sex" @click="xs = true" />
    <van-popup v-model="xs" position="bottom" :style="{ height: '20%' }">
      <van-radio-group v-model="userinfofrom.sex" direction="horizontal" class="mar">
        <!-- <div style="margin: 0 0 0 40px"> -->
        <van-radio style="margin: 0 10px 0 100px;" name="男">男</van-radio>
        <van-radio name="女">女</van-radio>
        <van-radio name="保密">保密</van-radio>
        <!-- </div> -->
      </van-radio-group>
    </van-popup>
    <div>


      <van-field readonly clickable label="生日" placeholder="请选择生日" :value="userinfofrom.birthday"
        @click="showPopup = true" />
      <van-popup v-model="showPopup" position="bottom" :style="{ height: '30%' }">
        <van-datetime-picker v-model="currentDate" type="date" title="请选择生日" :min-date="minDate" :max-date="maxDate"
          @confirm="confirm" />
      </van-popup>
    </div>
    <!-- <div @click="tj">
        提交
    </div> -->
    <div style="margin: 16px;">
      <van-button style="background: #d12d1a;color: #FFB619;" round block @click="tj">提交</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { timeFormat } from "@/gj/timeform.js";
import { fzsctp } from '@/api/sctp'
import { xgjk } from '@/api/xgxx.js'
import { Dialog } from 'vant'
export default {
  data() {
    return {
      xs: false,
      showPopup: false,
      userinfofrom: {},
      minDate: new Date(1965, 0, 1),
      maxDate: new Date(),
      currentDate: null,
    };
  },
  computed: {
    ...mapState("mkhuser", ["userInfo", "uid"]),
  },
  mounted() {
    console.log(this.userInfo);
  },
  watch: {
    userInfo: {
      immediate: true,
      handler(val) {
        console.log(val);
        let { avatar, nickname, sex, birthday } = val;
        console.log(birthday);
        this.userinfofrom = { sex, nickname, avatar };
        this.currentDate = birthday ? new Date(birthday) : new Date(2000, 0, 2);
      },
    },
  },
  methods: {
    confirm(e) {
      console.log(timeFormat(+e));
      //    this.currentDate=timeFormat(+e)
      this.userinfofrom.birthday = timeFormat(+e);
      this.showPopup = false;
    },
    change(val) {
      console.log(val.target.files[0])
      // let file=val.target[0]
      let tp = val.target.files[0]
      fzsctp(tp).then(res => {
        console.log(res)
        this.userinfofrom.avatar = res
      })

    },
    tj() {
      Dialog.confirm({
        message: '您确定要提交了吗？',
      })
        .then(() => {
          xgjk({
            uid: this.uid,
            avatar: this.userinfofrom.avatar,
            nickname: this.userinfofrom.nickname,
            birthday: this.userinfofrom.birthday,
            sex: this.userinfofrom.sex
          }).then(res => {
            console.log(res)
            this.$toast(res.msg)
            this.$router.push('wdwd')
          })
          this.$bus.$emit('bh')
        })
        .catch(() => {
          // on cancel
        });

      

    }
  },
};
</script>

<style scoped>
.dip {
  display: flex;
  justify-content: space-between;
  margin: 5px 15px;
  color: #646566;
  font-size: 14px;
  border-bottom: 1px solid rgb(210, 210, 210);

}

.nickname {
  font-size: 23px;
  margin: 15px 0 0 10px;
}

.pan {
  padding: 0 !important;
}

.mar {
  margin: 50px 0 0 0;
}

.tp {
  border-radius: 5px;
}

.input:-internal-autofill-selected {
  background-color: none;
}

::v-deep .van-ellipsis {
  color: #FFB619;
}

::v-deep .van-nav-bar__text {
  color: #FFB619;
}

::v-deep .van-icon-arrow-left {
  color: #FFB619;
}

::v-deep .van-button--info {
  background: #d12d1a;
  border: 1px solid #d12d1a;
  color: #FFB619;
}

.van-button--small {
  background: #d12d1a;
  border: 1px solid #d12d1a;
  color: #FFB619;
  /* background: #244028;
  border: 1px solid #244028; */
}

/* ::v-deep .van-field__label{
  color: #FFB619;
} */
</style>